<style lang="scss" scoped>
@import '@/assets/css/index';
  .award{
    position:absolute; 
    overflow:hidden; 
    -webkit-overflow-scrolling: touch; 
    top:0; 
    left:0; 
    bottom:0; 
    right:0;
    background-image: url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f025bed1-101b-4383-9c33-bbbeccec7177/3e882ebd-f847-49ea-9a14-181c84157bf6.png');
    background-size: 100% 100%;
    padding: 2rem;
    box-sizing: border-box;
    overflow: hidden;
    .wrapper{
      position: fixed;
      bottom: 3%;
      left: 2rem;
      right: 2rem;
      padding: 16px;
      background-color: white;
      border: 2px solid $mainColor;
      border-radius: 8px;
      box-sizing: border-box;
      overflow: hidden;
      text-align: center;
      .title{
        color: $mainColor;
        font-size: 15px;
        font-weight: bold;
      }
      .hexiaotip{
        font-size: 10px;
        color:#999;
      }
      .icon{
        width:215px;
        margin: 0 auto;
        margin-top: 20px;
        img{
          width: 100%;
        }
      }
      .timeIcon,.addressIcon{
        width:200px;
        margin: 0 auto;
        margin-top: 20px;
        img{
          width: 100%;
        }
      }
      .address{
        text-align: center;
        margin-top: 8px;
        color:#666;
        .name{
          font-size:11px;
        }
        .detail{
          margin-top: 4px;
          font-size:11px;
          line-height: 1.3em;
        }
      }
      .againIcon{
        width: 150px;
        height: 57px;
        margin: 0 auto;
        margin-top: 24px;
        img{
          width: 100%;
        }
      }
    }
  }
  .tip{
    color: $mainColor;
    text-align: center;
    margin-top: 16px;
  }
  .imgBox{
    width:268px;
    height:42px;
    margin-top: 16px;
    .go{
      // left: 50%;
      width:100%;
      height:42px;
    }
  }
</style>
<template>
  <div class="award">
    <div class="wrapper">
      <div class="icon">
        <img src="../../../assets/img/getawardinfo2.png" alt="">
      </div>
      <div class="timeIcon">
        <img src="../../../assets/img/gettime.png" alt="">
      </div>
      <div class="addressIcon">
        <img src="../../../assets/img/getaddress.png" alt="">
      </div>
      <div class="address">
        <div class="name">{{name}}</div>
        <div class="detail">({{detail}})</div>
      </div>
      <div class="againIcon" @click="toGameView">
        <img src="../../../assets/img/again.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import utils from '@/assets/js/utils.js'
import {Toast,Dialog} from 'vant'
import QRCode from 'qrcode'
import {mapState} from 'vuex'
import {myMixins} from "@/assets/js/mixins.js"
export default {
  name: 'pass',
  mixins: [myMixins],
  components: {
    [Dialog.name]:Dialog,
    [Toast.name]:Toast,
  },
  data(){
    return {
      list:[],
      showPop: false,
      awardName:'神秘小礼品',
      name:"清河湾售楼处",
      detail:'人民路12312312312312号',
      url:'1233',
      openid:'1233'
    }
  },
  computed: {
    ...mapState(['fivepass'])
  },
  created () {
    this.list = this.$store.state.addressList
    this.url = localStorage.getItem('hexiao_url')
    console.log("this.url",this.url)
    const oid = this.url.split('oid')[1].split("#")[0].split('=')[1]
    this.getAwardInfo(oid)

    // 分享
	  this.shareHomePage()
    // Dialog.alert({
    //   title: '核销链接',
    //   message: this.url
    // }).then(() => {
    //   // on close
    // });
  },
  mounted () {
    const _this = this
    document.title="领奖凭证"
    _this.$nextTick(function () {
		  _this.createQrcode()
		})
  },
  methods: {
    toGameView() {
      const url = `${this.fivepass[0]}?ji=1`
      this.$router.push(url)
    },
    getAwardInfo(oid) {
      const params = {
        oid: oid || 'oO4QA04ybpU6AbbpqEnsPfftq41g'
      }
      this.$request.getAwardInfo(params).then(res=>{
        console.log("res",res)
        if(res.errno == 0){
          this.awardName = res.data.projet
          this.name = res.data.prize
          this.detail = res.data.address
        }else{
          Dialog.alert({
            title: '系统提示',
            message: res.msg
          }).then(() => {
            // on close
          });
        }
      })
    },
    createQrcode(){
      let href = localStorage.getItem('hexiao_url');
      let canvas = document.getElementById('qrCode-canvas')
      QRCode.toCanvas(canvas, href, (error) => {
        if (error) {
          console.log(error)
        } else {
          canvas.style.width = '12rem'
          canvas.style.height = '12rem'
        }
      })
    },
    submit(){
      console.log('submit',this.form)
      let params = this.form
      console.log('utils.hasNull(params)',utils.hasNull(params))
      if(utils.hasNull(params)){
        Dialog.alert({
            title: '系统提示',
            message: '请填写完整信息'
          }).then(() => {
            // on close
          });
        return;
      }
      this.$request.saveInfo(params).then(res=>{
        console.log("res",res)
        if(res.errno == 0){
          Toast(res.message)
          Dialog.alert({
            title: '系统提示',
            message: '提交成功'
          }).then(() => {
            // on close
          });
        }else{
          Dialog.alert({
            title: '系统提示',
            message: res.msg
          }).then(() => {
            // on close
          });
        }
      })
    },
    RandomNum(Min, Max) {
      var Range = Max - Min;
      var Rand = Math.random();
      var num = Min + Math.floor(Rand * Range); //舍去
      return num;
    },
    clickItem(item){
      this.showPop = false
      this.form.address = item.value
    }
  }
}
</script>
